<ion-content class="{{theme}}" (click)="removeShake()">
  <div class="search_header">
    <div class="back_div" (click)="goBack()"></div>
    <ion-searchbar placeholder="请输入城市名称" (ionInput)="onInput($event)" (ionClear)="onClear($event)" (ionFocus)="onFocus($event)">
    </ion-searchbar>
    <div class="cacle_div" (click)="calceSearch()">取消</div>
  </div>
  <div class="serachList">
    <div class="search_result" *ngIf="searchCity">
      <div class="tips">搜索中...</div>
      <ul>
        <li *ngFor="let item of searchCity" (click)="serachs(item)">
          <div></div>{{item}}
        </li>
      </ul>
    </div>
    <div class="serachList_div">
      <div class="title_div">
        <ion-icon class="title">历史记录</ion-icon>
        <ion-icon class="icons" (click)="cleanHistory()" *ngIf='historyArray'><img src="../../assets/imgs/app_icon/delete.svg"></ion-icon>
      </div>
      <ul class="button_div ul_list">
        <li *ngIf='!historyArray'>还没记录</li>
        <li *ngFor="let item of historyArray index as i" (press)="pressEvent($event)" (click)="historyCity($event,item)">{{item}}
          <div class="delete_histroy" (click)="deleteHistroy(i,$event)"></div>
        </li>
      </ul>
    </div>
    <div class="serachList_div">
      <div class="title_div">
        <ion-icon class="title">热门城市</ion-icon>
      </div>
      <ul class="button_div">
        <li (click)="HotCitys('北京')">北京</li>
        <li (click)="HotCitys('上海')">上海</li>
        <li (click)="HotCitys('广州')">广州</li>
        <li (click)="HotCitys('深圳')">深圳</li>
        <li (click)="HotCitys('杭州')">杭州</li>
        <li (click)="HotCitys('南京')">南京</li>
        <li (click)="HotCitys('郑州')">郑州</li>
      </ul>
    </div>
  </div>
  <div class="collection">
    <div class="collection_list">
      <div class="title_div">
        <ion-icon class="title">我的收藏</ion-icon>
        <ion-icon class="icons" (click)="cleanCollection()" *ngIf='collectionArray'><img src="../../assets/imgs/app_icon/delete.svg"></ion-icon>
      </div>
      <ul class="button_div ul_list">
        <li *ngIf='!collectionArray'>还没收藏</li>
        <li *ngFor="let item of collectionArray index as i" (press)="pressEvent($event)" (click)="historyCity($event,item)">{{item}}
          <div class="delete_histroy" (click)="deleteCollection(i,$event)"></div>
        </li>
      </ul>
    </div>
    <div class="collection_list">
      <div class="title_div">
        <ion-icon class="title">设置颜色</ion-icon>
      </div>
      <ul class="button_div" id="setul">
        <li (click)='setTheme("background_one",0)'>一斥染</li>
        <li (click)='setTheme("background_two",1)'>瑠璃紺</li>
        <li (click)='setTheme("background_six",2)'>珊瑚朱</li>
        <li (click)='setTheme("background_three",3)'>若竹</li>
        <li (click)='setTheme("background_four",4)'>瓶覗</li>
        <li (click)='setTheme("background_five",5)'>青碧</li>
      </ul>
    </div>
    <div class="collection_list">
      <div class="title_div">
        <ion-icon class="title">开发人员</ion-icon>
      </div>
      <ul class="button_div">
        <li>栗豪</li>
      </ul>
    </div>
  </div>
</ion-content>
